import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, Ref, ref, toRaw } from 'vue';
import Tool from './tool';
import Images from './images';
import Serial from './serial';
import { Prepare } from '@/domain/correction/types/prepare';
import { useImageStore } from '@/domain/correction/hooks/image';
import { ECurrentOperation } from '@/domain/correction/types/jobs/images';
import Mark from './toolPage/mark';
import Answers from './toolPage/answers';
import PreparePage from './toolPage/prepare';
import Chartlet from './toolPage/chartlet';
import { AnswersID, AnswersTestID } from '@/domain/correction/types';

export default defineComponent({
  name: 'correctEditor',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    stu_id: {
      type: Boolean,
      default: false
    },
    prepareData: {
      type: Object as PropType<Prepare>
    }
  },
  setup() {
    const store = useImageStore();
    const current = computed(() => store.state.activeImageManages?.idx);
    const currentOperation = computed(() => {
      return store.state.activeImageManages?.im.currentOperation;
    });

    const setCurrent = (idx: number, id: AnswersID) => {
      store.changeActiveImageManages(idx, id);
    };

    const setBySubjectCurrent = (id: AnswersID) => {
      store.getActiveImageManagesById(id);
    };

    return () => (
      <div class={'w-full h-full'}>
        <Serial setCurrent={setCurrent} setBySubjectCurrent={setBySubjectCurrent} current={current.value}></Serial>
        <div class={'img-contain w-full h-v70 border-gray-200  relative'}>
          <Images></Images>
        </div>

        <Tool></Tool>
        {currentOperation.value === ECurrentOperation.mark ? <Mark></Mark> : null}
        {currentOperation.value === ECurrentOperation.prepare ? <PreparePage></PreparePage> : null}
        {currentOperation.value === ECurrentOperation.answers ? <Answers></Answers> : null}
        {currentOperation.value === ECurrentOperation.chartlet ? <Chartlet></Chartlet> : null}
      </div>
    );
  }
});
